<template>
	<view class="pupMenu">
		<view class="shade" v-show="showPup" @click="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showClass}">
				<view v-for="(item,index) in navList" :key="index" @click="change(item)">
					<img :src="item.src" />
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
import IMSDK, {
	IMMethods,
} from "openim-uniapp-polyfill";
import imgs from "./imgEnum.js";
const { fuzhi, del, zhuanfa, chehui } = imgs

export default {
	name: 'pupMenu',
	props: {
		wxPupData: {
			type: Object,
			required: true,
			default: 1
		},
		isSender: Boolean,
		msgDelete: Function,
		msgRevoke: Function,
	},
	watch:{
		wxPupData(e,oldVal){
			let [ touches, style, index ] = [e.touches[0], "", e.currentTarget.dataset.index];
			
			/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
			if (touches.clientY > (this.winSize.height / 2)) {
				style = `bottom:${this.winSize.height-touches.clientY + 20}px;`;
			} else {
				style = `top:${touches.clientY + 20}px;`;
			}
			if (touches.clientX > (this.winSize.witdh / 2)) {
				style += `right:32rpx`;
			} else {
				style += `left:32rpx`;
			}
			// style：计算出弹窗在页面显示的位置
			this.popStyle = style;
			
			/*
				* 计算时长，m<2：2分钟以内可以撤回，用户id用来判断只能撤回我自己发送的内容
				* type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，
				* navList：可根据数据信息，自行组合navList需要显示的内容。
			*/
			let start = e.item.createTime;
			let end = Date.now();
			let utc = (end - start) / (60 * 1000);
			let list = []
			// 只能撤回自己发送的信息
			if(this.isSender) {
				list = [{
						text: '删除',
						src: del,
					}
				]
				if(utc < 5) {
					list.push({
						text: '撤回',
						src: chehui,
					})
				}
			}
			if(e.item.contentType == 101){
				this.navList = [
					{
						text: '复制',
						src: fuzhi,
					},
					{
						text: '转发',
						src: zhuanfa,
					},
					...list,
				]
			} else {
				this.navList = [
					{
						text: '转发',
						src: zhuanfa,
					},
					...list,
				]
			}
			
			// 显示弹窗
			this.showPup = true;
			this.$nextTick(() => {
				setTimeout(() => {
					this.showClass = true;
				}, 10);
			});
		},
	},
	data() {
		return {
			navList:[],
			popStyle: "",
			showPup: false,
			showClass: false,
			winSize: {},
		}
	},
	computed: {
		...mapGetters([
			"storeCurrentConversation",
		]),
	},
	mounted() {
		this.getWindowSize();
		// #ifdef H5
		document.onLong = function(e) {
			var e = e || window.event;
			e.preventDefault();
		};
		// #endif
	},
	methods: {
		change(item){
			// 根据type和msg_type来判断具体需要调用下方哪个方法。
			if(item.text === '复制') {
				uni.setClipboardData({
					data: this.wxPupData?.item?.textElem?.content,
					showToast: true,
				});
			} else if (item.text === '删除') {
				this.msgDelete()
			} else if (item.text === '撤回') {
				this.msgRevoke()
			}
		},
		
		// 图片操作
		changeImg(type){
			if(type == 3){
				// 图片预览
				let arr = [];
				arr.push(this.$imgUrl+this.wxPupData.item.content)
				uni.previewImage({
					urls: arr,
				});
			}else if(type == 4){
				// 图片下载
				// #ifdef H5
				location.href = this.$imgUrl+this.wxPupData.item.content;
				// #endif
				// #ifdef APP-PLUS
				this.$saveImageToPhotosAlbum(this.$imgUrl+this.wxPupData.item.content)
				// #endif
			}
		},
		// 文件视频操作
		changeFile(type) {
			if(type == 4){
				// 下载
				// #ifdef H5
				location.href = this.$imgUrl + this.wxPupData.item.content;
				// #endif
				
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '正在下载'
				});
				var url = this.$imgUrl + this.wxPupData.item.content;
				let dtask = plus.downloader.createDownload(url, {
					//本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，这时用户文件管理器能看到的了，之后创建连信作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。
					filename: "file://storage/emulated/0/我的APP/" + this.wxPupData.item.file_name //利用保存路径，实现下载文件的重命名
				},(d, status)=> {
					//d为下载的文件对象
					if (status == 200) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '已保存到文件夹：/我的APP/' + this.wxPupData.item.file_name, //保存路径
							duration: 3000,
						});
						//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
						let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
						setTimeout(()=>{
							plus.runtime.openFile(d.filename); //选择软件打开文件
						},1500)
					} else {
						//下载失败
						uni.hideLoading();
						plus.downloader.clear(); //清除下载任务
						uni.showToast({
							icon:'none',
							mask:true,
							title: '下载失败，请稍后重试',
						});
					}
				})
				dtask.start();
				// #endif
			}
		},
		// 收藏
		msgFavAdd(){
			this.$http.post("/api/***",{
				msg_id:this.wxPupData.item.id,
			}).then(res=>{
				if(res.code == 1){
					uni.showToast({
						icon:'none',
						title: '收藏成功',
					});
					this.$emit('getNewList');
				}
			})
		},
		// 取消收藏
		msgFavCancel(){
			this.$http.post("/api/***",{
				msg_id:this.wxPupData.item.msg_id,
			}).then(res=>{
				if(res.code == 1){
					uni.showToast({
						icon:'none',
						title: '已取消',
					});
					this.$emit('getNewList');
				}
			})
		},
		
		/* 获取窗口尺寸 */
		getWindowSize() {
			uni.getSystemInfo({
				success: (res) => {
					this.winSize = {
						"witdh": res.windowWidth,
						"height": res.windowHeight
					}
				}
			})
		},
		/* 隐藏弹窗 */
		hidePop() {
			this.showClass = false;
			this.showPup = false;
		},
	}
}
</script>
<style lang="scss" scoped>
	.pupMenu {
		/* 遮罩 */
		.shade {
			position: fixed;
			z-index: 100;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			-webkit-touch-callout: none;
		
			.pop {
				position: fixed;
				z-index: 101;
				color: #333;
				background: #4a4a4a;
				border-radius: 12rpx;
				transition: transform 0.15s ease-in-out 0s;
				user-select: none;
				-webkit-touch-callout: none;
				transform: scale(0, 0);
				display: flex;
				align-items: center;
				&.show {
					transform: scale(1, 1);
				}

				img {
					width: 50rpx;
					height: 50rpx;
				}

				&::after {
					position: absolute;
					width: 0;
					height: 0;
					border-color: transparent;
					border-style: solid;
					border-width: 6px;
					color: #4a4a4a;
					bottom: 0;
					border-top-color: currentColor;
					border-bottom-width: 0;
					margin-bottom: calc(6 * -1);
				}

				uni-view{
					width: 120rpx;
					height: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					uni-image{
						width: 36rpx;
						height: 36rpx;
						display: block;
						margin:0 auto 8rpx;
					}
					uni-text{
						display: block;
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>
